<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				初识Vue：
					1.<div id="root">是一个容器，容器中写的不是原始html代码，而是Vue的模板代码。
					2.所谓的模板代码，类似于React中的jsx，是html+js的混合体
					3.{{xxxx}}中的xxx会自动读取到data中的属性，且xxxx当表达式去解析
		-->

		<!-- 准备好一个容器 -->
		<div id="root">
			<h1>Hello,{{school}}</h1>
			<h1>Hello,{{school.toUpperCase()}}</h1>
			<h1>我学的是：{{subject}}</h1>
		</div>

		<!-- 编写Vue相关的js代码 -->
		<script type="text/javascript" >
			/* 
				1.想让Vue工作，就必须创建一个Vue的实例对象
				2.创建Vue实例时要传入一个配置对象
				3.所谓配置对象就是，key是指定值，value是指定类型
		 */
			new Vue({
				el:'#root',//el用于指定当前Vue实例服务与哪个容器，值为选择器字符串，写法同jQuery
				data:{ //data用于存储数据，为root容器提供数据，值为一个对象，相当与react中的state
					//data中可以根据业务需要，随意编写一组一组的key-value
					school:'atguigu',
					subject:'前端'
				}
			})
		</script>
	</body>
</html>